<template>
	<view>
		<swiperGesture :lrDistance="3" leftMed="leftToRight" rightMed="rightToLeft" @leftToRight="leftToRight"
			@rightToLeft="rightToLeft">
			<view>
				<tabs :type="tabList" v-model="tabActive"></tabs>
			</view>

			<view class="margin-top-sm card">

        <view v-if="tabActive===0">
          <view class="margin-tb" v-for="article in articles" :key="article.id">
            <indexArticleCard :article="article"></indexArticleCard>
          </view>
        </view>

        <view v-if="tabActive===1">
          <view class="margin-tb" v-for="comment in comments" :key="comment.id">
            <zanComment :record="comment"></zanComment>
          </view>
        </view>



				<view class="h-100 flex" v-if=" (tabActive===2||articles.length===0||comments.length===0)">
					<emptyContent class="w-100"></emptyContent>
				</view>



			</view>
		</swiperGesture>
	</view>
</template>

<script>
  export default {
    data() {
			return {
				tabList: [{
						title: "文章"
					},
					{
						title: "评论"
					},
					{
						title: "其他"
					}
				],
				tabActive: 0,
        articles: null,
        comments: null
			}
		},
    mounted() {
      this.getUserZanArticles()
    },
    watch:{
      tabActive(val, oldVal){
        switch (+val) {
          case 0:
            this.getUserZanArticles()
            break;
          case 1:
            this.getUserZanComment()
            break;
        }
      }
    },
		methods: {
      getUserZanArticles(){
        this.$api.getUserZanArticles().then(res=>{
          this.articles = res.map(zan=>zan.article)
        })
      },
      getUserZanComment(){
        this.$api.getUserZanComment().then(res=>{
          this.comments = res
          console.log(this.comments)
        })
      },
			leftToRight() {
				if (this.tabActive < this.tabList.length - 1) {
					this.tabActive += 1;
				}
			},
			rightToLeft() {
				if (this.tabActive > 0) {
					this.tabActive -= 1;
				}
			}
		}
	}
</script>

<style lang="scss">
	.card {
		height: calc(100vh - 220upx);
	}
</style>
